<template>
  <el-form ref="ruleForm"
           :model="form"
           :rules="rules"
           label-width="90px">
    <el-form-item prop="code"
                  label="公司编号">
      <el-input v-model="form.code"
                :placeholder="placeholder"
                @blur="handleInput" />
    </el-form-item>
    <el-form-item prop="name"
                  label="公司名称">
      <el-input v-model="form.name"
                :placeholder="nameFlag ? '未获取' : '自动获取'"
                disabled />
    </el-form-item>
    <div v-if="nameFlag"
         class="error-color">您输入的有误，未查询到相应结果</div>
    <el-form-item prop="applyDesc"
                  label="申请说明">
      <el-input v-model="form.applyDesc"
                type="textarea"
                show-word-limit
                placeholder="请输入申请说明"
                maxlength="200"
                :autosize="{ minRows: 3, maxRows: 5}" />
    </el-form-item>
    <div class="footer_buts">
      <el-button type="default"
                 @click="handleCancel">取消</el-button>
      <el-button type="primary"
                 @click="handleSubmit">提交</el-button>
    </div>
  </el-form>
</template>

<script>
import baseMixin from "@components/mount/mixins/common";
import axios from 'axios'
import { tenant } from "@service";
export default {
  name: "BigDataJoinSubmit",
  mixins: [baseMixin],
  props: {
    url: String,
    placeholder: {
      type: String,
      default () {
        return "如：ORG2090800061";
      }
    }
  },
  data () {
    return {
      rules: {
        code: [
          { required: true, message: "请输入公司编号", trigger: "blur" }
        ]
      },
      form: {
        code: null,
        name: null,
        applyDesc: null
      },
      nameFlag: false
    };
  },
  methods: {
    async handleInput () {
      if (!this.form.code) return false;
      const { data } = await tenant.getTenantByCode(this.form.code);
      this.form.name = data?.name;
      this.nameFlag = !data?.name;
    },
    async handleSubmit () {
      if (!this.form.code) {
        return this.$message({ type: 'error', message: "请输入公司编号" });
      }
      if (this.nameFlag) {
        return false;
      }
      const { code, message } = await axios({
        method: 'POST',
        url: this.url,
        data: this.form,
      });
      if (0 !== code) {
        return this.$message({ type: "error", message });
      }
      this.$message({ type: "success", message: "新增申请成功！" });
      this.$emit("confirm");
      this.handleCancel();
    },
    handleCancel () {
      this.$emit("cancel");
      this.form = {
        code: null,
        name: null,
        applyDesc: null
      }
      this.nameFlag = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.footer_buts {
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.error-color {
  color: var(--prev-color-primary);
  margin-bottom: 10px;
  margin-left: 90px;
}
</style>